<!DOCTYPE html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel ="stylesheet" type="text/css" href="css/stye.css"/>
        <link rel ="stylesheet" type="text/css" href="css/footer.css" />
        <link rel ="stylesheet" type="text/css" href="css/dropdown.vertical.css" />
        <script type="text/javascript" src="JS/JQuery/1.4.2jquery.min.js"></script>
        <script type="text/javascript" src="JS/ddaccordion.js"></script>
        <link rel ="stylesheet" type="text/css" href="css/menu_style.css"/>
        <link rel ="stylesheet" type="text/css" href="css/slideBar.css"/>
        <link rel ="stylesheet" type="text/css" href="css/reg.css" />

        <script type="text/javascript">

            ddaccordion.init({
                headerclass: "headerbar", //Shared CSS class name of headers group
                contentclass: "submenu", //Shared CSS class name of contents group
                revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
                mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
                collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
                defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
                onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
                animatedefault: false, //Should contents open by default be animated into view?
                persiststate: true, //persist state of opened contents within browser session?
                toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
                togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
                animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
                oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                    //do nothing
                },
                onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                    //do nothing
                }
            })

        </script>

        <title>Hello World | เรียนรู้ออนไลน์</title>


    </head>

    <body>

        <div id="topbar">
            <img class="LogoWord" src="images/Helloworld.png"/> 
        </div>

        <br class="clearF"/>

        <!-- mainLogo -->
        <div id ="mainLogo">
            <!-- Logo -->
            <div id ="Logo" >

                <h1><center>HelloWorld.in.th Logo</center></h1>

            </div><!-- end logo -->
        </div><!-- end mainLogo -->


        <?php
        include_once ("includes/nav-top.php");
        ?>


        <!-- wapper -->
        <div id="wap">
            <!-- ads -->
            <div class="ads">
                <center><h1>Banner Ads</h1></center>  
            </div><!-- end ads -->

            <div id ="slideBarLeft">

                <?php
                include_once ("includes/nav-left.php");
                ?>

                <?php
                include_once ("includes/counter-bar.php");
                ?>

                <?php
                include_once ("includes/another-page-bar.php");
                ?>

            </div> <!-- end slideBarRight -->

            <div id ="slideBarRight">
                <!-- Facebook Plugin-->
                <div id="fb-root"></div>
                <script>(function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s); js.id = id;
                    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));</script>
                <div class="fb-like-box" 
                     data-href="http://www.facebook.com/pages/Page%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A-Hello-World/309232669122256" 
                     data-width="216" data-height="350" data-show-faces="true" data-stream="false" data-header="true">
                </div>
                <br class="clearF" />
                <!-- end Facebook Plugin-->
            </div> <!-- end  slideBarLeft -->


            <div id="content">
                <h2>เรียนรู้การเขียนโปรแกรมเบื้องต้น</h2>

            </div><!-- end content -->

            <!-- footer -->
            <?php
            include_once ("includes/footer.php");
            ?>
            <!-- footer -->

        </div>  <!-- end wappeer -->
    </body>
</html>

